import { logout } from '@/services/login';
import { FormatNumber } from '@/utils/format';
import { accDiv } from '@/utils/math';
import { LogoutOutlined } from '@ant-design/icons';
import { Link, history, useLocation, useModel } from '@umijs/max';
import { Button, Modal, Tag } from 'antd';
import React, { CSSProperties } from 'react';

const tabs = [
  {
    name: '首页',
    to: '/dashboard',
    key: 'home',
  },
  {
    name: '产品中心',
    key: 'production-center',
    to: '/production-center/acs/acs-change',
  },
  {
    name: '财务中心',
    key: 'financial-center',
    to: '/financial-center/tallybook/tallybook-account',
  },
  {
    name: '账户中心',
    key: 'account-center',
    to: '/account-center/account-info/base-info',
  },
];

interface HeaderProps {
  style?: CSSProperties;
}

const Header = (props: HeaderProps) => {
  const { pathname } = useLocation();
  const { initialState } = useModel('@@initialState');
  return (
    <div
      className={`w-full min-w-[1024px] h-14 z-10 flex px-4 justify-between items-center text-[16px]
    ${
      pathname === '/dashboard'
        ? 'fixed border-b border-[rgba(5, 5, 5, 0.06)] bg-white'
        : ''
    }`}
      style={props.style || {}}
    >
      <div
        className={`${
          pathname === '/dashboard'
            ? 'w-[1440px] flex justify-between mx-auto'
            : 'w-full flex justify-between mx-auto'
        }`}
      >
        {/* <div className="w-[256px]"></div> */}
        <div className="font-bold flex gap-3 h-full items-center">
          {tabs.map((item, index) => {
            return (
              <React.Fragment key={index}>
                <Link
                  className={`header-item ${
                    pathname.includes(item.key)
                      ? 'text-[#00bdff] header-item-line'
                      : ''
                  }`}
                  to={item.to}
                  key={index}
                >
                  {item.name}
                </Link>
                {index !== tabs.length - 1 && (
                  <div className="border-l-[1px] h-[30%] text-[#ccc]"></div>
                )}
              </React.Fragment>
            );
          })}
        </div>
        <div
          className={`${
            pathname !== '/dashboard' ? 'pr-4' : ''
          } flex items-center gap-3`}
        >
          <span>服务费余额</span>
          <span>
            ¥ {FormatNumber(accDiv(initialState?.accountInfo?.moneyLeft, 100))}
          </span>
          <Button
            onClick={() => {
              history.push('/financial-center/servicefee/service-recharge');
            }}
            type="primary"
          >
            充值
          </Button>
          <Button
            onClick={() => {
              history.push('/financial-center/servicefee/service-withdraw');
            }}
            type="primary"
          >
            提现
          </Button>
          <div className="flex items-center gap-2">
            <Tag>{initialState?.currentUser?.mobile}</Tag>
            <div
              className="flex items-center cursor-pointer"
              onClick={() => {
                Modal.confirm({
                  title: '退出系统',
                  content: '确定注销并退出系统吗？',
                  cancelText: '取消',
                  okText: '确认',
                  onOk: async () => {
                    logout().finally(() => {
                      history.push('/login');
                    });
                  },
                });
              }}
            >
              <LogoutOutlined className="rotate-[-90deg]" />
              <span>退出</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;
